<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Top 10 Categories</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container mt-5">
    <h1 class="text-center">Click Count by Category</h1>
    <div id="chart" style="width: 100%; height: 600px;"></div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        axios.get('/api/categoriestop10/data')
            .then(function (response) {
                const data = response.data;

                // Process data
                const categories = data.map(item => item.categoryId);
                const clickCounts = data.map(item => item.clickCount);

                const option = {
                    title: {
                        text: 'Click Count by Category',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            const category = params.name;
                            const clickCount = params.value;
                            const item = data.find(item => item.categoryId === category);
                            return `Category ID: ${category}<br/>Click Count: ${clickCount}<br/>Order Count: ${item.orderCount}<br/>Pay Count: ${item.payCount}`;
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: categories,
                        axisLabel: {
                            interval: 0,
                            rotate: 30
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: 'Click Count',
                        type: 'bar',
                        data: clickCounts,
                        itemStyle: {
                            color: '#4caf50'
                        }
                    }]
                };

                const chart = echarts.init(document.getElementById('chart'));
                chart.setOption(option);
            })
            .catch(function (error) {
                console.error('Error fetching data:', error);
            });
    });
</script>
</body>
</html>
